
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
    </style>
    <script src="../dist/vue.js"></script>
</head>
<body>
    <div id="root"></div>
    
</body>
<script>
  // ref 处理基础数据类型 【string , number, boolean】
  // reactive 处理非基础数据类型 【对象，数组】
  const app = Vue.createApp({
      template:
      ` 
        <div>
        <div>
          姓名： {{ students.name }}
          姓名： {{ name }}
        </div>
        
        </div>
      `,
        setup(props, context) {
          const { ref, reactive, readonly, toRefs } = Vue
        
          const students = reactive(
            {
              name: '张三',
              age: 12
            }
          )

          const { name } = toRefs(students)
         
          setTimeout(()=>{
            students.name = 'jack'
            
          }, 2000)
          return { students, name }
        }
  });

  const vm = app.mount("#root");
</script>
</html>